<html>
<head>
  <title>Complex Layout</title>
    <link rel="stylesheet" type="text/css" href="resources/css/ext-all.css" />
    
    <style type="text/css">
    html, body {
        font:normal 12px verdana;
        margin:0;
        padding:0;
        border:0 none;
        overflow:hidden;
        height:100%;
    }
    p {
        margin:5px;
    }
    .settings {
        background-image:url(shared/icons/fam/folder_wrench.png);
    }
    .nav {
        background-image:url(shared/icons/fam/folder_go.png);
    }
    </style>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" type="text/javascript"></script>
    <!-- GC -->
    <!-- LIBS -->
    <script type="text/javascript" src="adapter/ext/ext-base.js"></script>
	
    <!-- ENDLIBS -->

    <script type="text/javascript" src="ext-all.js"></script>

    <!-- EXAMPLES -->
    <script type="text/javascript" src="shared/examples.js"></script>
  
    <script type="text/javascript">
    $(document).ready(function() {
		
	});

	var action1 = new Ext.Action({
    text: 'Action 1',
    handler: function(){
        Ext.Msg.alert('Click','You clicked on "Action 1".');
    }
});
var action2 = new Ext.Action({
    text: 'Action 2',
    handler: function(){
        Ext.Msg.alert('Click','You clicked on "Action 2".');
    }
});
var action3 = new Ext.Action({
    text: 'Action 3',
    handler: function(){
        Ext.Msg.alert('Click','You clicked on "Action 3".');
    }
});
var action4 = new Ext.Action({
    text: 'Action 4',
    handler: function(){
        Ext.Msg.alert('Click','You clicked on "Action 4".');
    }
});


var mainTBar = new Ext.Toolbar({
items:[action1,
    {                   
        text: 'Menu 1',
        menu: [action2,action3,action4]          
    },
    {                   
        text: 'Menu 2',
        menu: [action2,action3,action4]          
    }]
})  

	
	Ext.onReady(function(){
    
        
		
		
		// NOTE: This is an example showing simple state management. During development,
        // it is generally best to disable state management as dynamically-generated ids
        // can change across page loads, leading to unpredictable results.  The developer
        // should ensure that stable state ids are set for stateful components in real apps.
        Ext.state.Manager.setProvider(new Ext.state.CookieProvider());
        
        var viewport = new Ext.Viewport({
            layout: 'border',
            items: [
            // create instance immediately
            new Ext.Panel({
                region: 'north',
				title : '<img style="height:90px;" src="images/logo.png" />',
				tbar: mainTBar,
				bodyStyle:'display:none;'
            }), {
                // lazily created panel (xtype:'panel' is default)
                region: 'south',
                height: 25, // give north and south regions a height
				overClass:'x-view-over',
                html: '<p>&copy; 2010 clickpro.cn</p>'
            }, {
                region: 'west',
        border:true,
        title: '',
        margins: '5 0 0 0', 
        cmargins: '5 5 0 0',
        bodyStyle:'padding:5px 5px 5px 5px',
        autoScroll:true,
        labelWidth:100,
        collapsible:true,
        split:true,
        width:150,
        minSize: 150,
        maxSize: 200,
        items:[
           new Ext.form.TextField({fieldLabel: 'First Name',name: 'first',width:130}),
           new Ext.form.TextField({fieldLabel: 'Last Name',name: 'last',width:130})        
        ]
            },
            // in this instance the TabPanel is not wrapped by another panel
            // since no title is needed, this Panel is added directly
            // as a Container
            new Ext.Panel({
                region: 'center',
				title: '1',
				margins: '5 0 0 0',
				bodyStyle: {
					background: '#ffffff',
					padding: '7px'
				},
				html: '2010'
            })]
        });
        // get a reference to the HTML element with id "hideit" and add a click listener to it 
        
		/*style fixed*/
		$('#ext-gen11').hide();
		$('#ext-gen8').css({'background-image': "none"});
		$('#ext-gen20').css({border: "none",background:"#DFE8F6"});
		$('#ext-comp-1019').css({'top': "133px"});
		$('#ext-comp-1016').css({'top': "133px"});
    });
    </script>
</head>
<body>
    
</body>
</html>